<template>
    <el-form ref="actionform" :model="formData" label-width="80px" v-loading="showLoading">
		<el-form-item label="勋章类型" verify prop="medalType">
			<el-select v-model="formData.medalType" placeholder="请选择勋章类型" class="formItem">
				<el-option
					v-for="item in medalTypeList"
					:key="item.labelId"
					:label="item.labelText"
					:value="item.labelId"></el-option>
			</el-select>
        </el-form-item>
		<el-form-item label="勋章名称" verify prop="medalName">
			<el-input class="formItem" v-model="formData.medalName" placeholder="请输入勋章名称"></el-input>
		</el-form-item>
		<el-form-item label="勋章描述" verify prop="medalDesc">
			<el-input
				class="formItem"
				type="textarea"
				:autosize="{ minRows: 1, maxRows: 4}"
				v-model="formData.medalDesc"
				placeholder="请输入勋章描述"></el-input>
		</el-form-item>
		<el-form-item label="勋章排序" verify prop="sort">
			<el-input-number v-model="formData.sort" :min="1" class="formItem" />
		</el-form-item>
		<!-- <el-form-item label="绑定权益" verify prop="medalEquityUid">
			<el-select v-model="formData.medalEquityUid" placeholder="请选择勋章权益" class="formItem">
				<el-option
					v-for="item in medalEquityList"
					:key="item.medalEquityUid"
					:label="item.medalEquityName"
					:value="item.medalEquityUid"></el-option>
			</el-select>
		</el-form-item> -->
		<el-form-item label="获得途径" verify prop="medalGetActionParam" v-if="formData.medalType === 2">
			<el-select v-model="formData.medalGetActionParam" multiple collapse-tags placeholder="请选择勋章获得条件" class="formItem">
				<el-option
					v-for="item in medalDataList"
					:key="item.medalUid"
					:label="item.medalName + ' ('+ getMedalTypes(item.medalType) + ')'"
					:value="item.medalUid"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="设置阀值" verify prop="sort" v-if="formData.medalType === 1">
			<el-input-number v-model="formData.medalGetActionCount" class="formItem" :min="1" placeholder="完成需要次数" />
		</el-form-item>
		
		<el-form-item label="完成条件" verify prop="medalGetText">
			<!-- <el-select v-model="formData.medalGetText" placeholder="请选择勋章获得途径" class="formItem">
				<el-option
					v-for="item in accessWayList"
					:key="item.labelId"
					:label="item.labelText"
					:value="item.labelId"></el-option>
			</el-select> -->
			<el-input class="formItem" v-model="formData.medalGetText" placeholder="请输入勋章获得途径"></el-input>
		</el-form-item>
		<el-form-item label="获得条件" verify prop="medalGetActionType">
			<el-select v-model="formData.medalGetActionType" placeholder="请选择勋章获得条件" class="formItem">
				<el-option
					v-for="item in rulesList"
					:key="item.labelId"
					:label="item.labelText"
					:value="item.labelId"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="勋章(暗)" prop="medalImageUrlOff" verify>
			<el-upload
				:action="uploadUrl"
				:data="access_token"
				:show-file-list="false"
				:before-upload="beforeUpload"
				:on-success="(res, file, fileList) => uploadMedalImageSuccess(res, file, fileList, 'medalImageUrlOff')"
			>
				<el-image :src="formData.medalImageUrlOff" class="avatar" v-if="formData.medalImageUrlOff" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				<el-input class="inputs none imgArea" v-model="formData.medalImageUrlOff"></el-input>
			</el-upload>
		</el-form-item>
		<el-form-item label="勋章(亮)" prop="medalImageUrlOn" verify>
			<el-upload
				:action="uploadUrl"
				:data="access_token"
				:show-file-list="false"
				:before-upload="beforeUpload"
				:on-success="(res, file, fileList) => uploadMedalImageSuccess(res, file, fileList, 'medalImageUrlOn')"
			>
				<el-image :src="formData.medalImageUrlOn" class="avatar" v-if="formData.medalImageUrlOn" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				<el-input class="inputs none imgArea" v-model="formData.medalImageUrlOn"></el-input>
			</el-upload>
		</el-form-item>
		<el-form-item label="海报图" prop="medalPosterImageUrl" verify>
			<el-upload
				:action="uploadUrl"
				:data="access_token"
				:show-file-list="false"
				:before-upload="beforeUpload"
				:on-success="(res, file, fileList) => uploadMedalImageSuccess(res, file, fileList, 'medalPosterImageUrl')"
			>
				<el-image :src="formData.medalPosterImageUrl" class="avatar" v-if="formData.medalPosterImageUrl" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				<el-input class="inputs none imgArea" v-model="formData.medalPosterImageUrl"></el-input>
			</el-upload>
		</el-form-item>
		<el-form-item style="margin-bottom: 0">
			<p class="flex-center margin_top_30">
				<el-button type="primary" @click="handlePost">确  认</el-button>
				<el-button @click="closeDialog">取  消</el-button>
			</p>
		</el-form-item>
	</el-form>
</template>

<script>
    import {
		addMedal,
		editMedal
    } from "@/api/table";

    export default {
        name: "MEDAL_ACTION",
        components: {},
        props: {
            infoData: {
            	type: Object,
                default: {}
			},
			medalTypeList: {
				type: Array,
                default: []
			},
			rulesList: {
				type: Array,
                default: []
			},
			medalEquityList: {
				type: Array,
                default: []
			},
			medalDataList: {
				type: Array,
                default: []
			},
		},
        data() {
            return {
				formData: {},
                accessWayList: [{
					labelId: 1,
					labelText: '发送祝福'
				}, {
					labelId: 2,
					labelText: '接收祝福'
				}],
				showLoading: false,                
				access_token: {
                    access_token: this.$store.getters.token
                },
				uploadUrl: process.env[this.$base] + "/medias/image/upload",
            }
        },
      	methods: {
			updateData() {
				let medalGetActionParam = [];
				if (this.infoData.medalGetActionParam) {
					medalGetActionParam = this.infoData.medalGetActionParam.split(',')
				}
				this.formData = {...this.infoData, medalGetActionParam};
			},

			// 获取勋章类型
            getMedalTypes(medalType) {
                const info = this.medalTypeList.find(item => item.labelId === medalType) || {}
                return info.labelText || ''
            },
			
			// 获取途径
			checkAccessWay(e) {
                this.formData.accessWay = e;
            },
            
			// 图片上传前的钩子
			beforeUpload(file) {
				var type = "image/jpg,image/jpeg,image/png,image/gif";
				const isJPG = type.indexOf(file.type) != -1;
				const isLt1M = file.size / 1024 / 1024 < 1;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG,JPEG,PNG,GIF 格式!");
				}
				if (!isLt1M) {
					this.$message.error("上传图片大小不能超过 1MB!");
				}
				return isJPG && isLt1M;
			},

			// 勋章图
			uploadMedalImageSuccess(response, file, fileList, imageType) {
				if (response.code == "200") {
					const { fileUrl, fileUid } = response.data;
					this.$set(this.formData, imageType, fileUrl);
				}
			},

			// 确认
			handlePost() {
				const medalGetActionParam =
					this.formData.medalGetActionParam
					? this.formData.medalGetActionParam.toString()
					: null;
				const postData = {
					...this.formData,
					medalGetActionParam
				};
				this.$refs.actionform.validate(valid => {
					if (valid) {
						this.showLoading = true;
						// 编辑
						if (postData.medalUid) {
							editMedal(postData).then(res => {
								if (res.data.isSuccessful !== "Y") {
									this.$message.error(res.data.message);
									return
								}
								this.$message({
									message: "编辑成功！",
									type: "success"
								});
								setTimeout(() => {
									this.closeDialog(true);
								}, 0);
							}).finally(() => {
								this.showLoading = false;
							});
							return
						}

						// 新增
						addMedal(postData).then(res => {
							if (res.data.isSuccessful !== "Y") {
								this.$message.error(res.data.message);
								return
							}
							this.$message({
								message: "新增成功！",
								type: "success"
							});
							setTimeout(() => {
								this.closeDialog(true);
							}, 0);
						}).finally(() => {
							this.showLoading = false;
						});
					}
				})
			},

			closeDialog(refresh = false, type = ''){
				this.formData = {};
				this.$emit('func', {
					action: false,
					refresh,
					type
				})
			}
      	},
  	}
</script>
<style lang="scss" scoped>
	.formItem {
		width: 360px;
    }
</style>

